<template>
	<el-dialog v-model="dialog" title="部门消息" width="912px" center destroy-on-close>
		<el-container>
			<el-aside width="416px">
				<div class="message-list-wrapped">
					<div class="list-table-content">
						<el-table :data="msgStore.msg_list.length >0 ? msgStore.msg_list : tableData"
							style="width: 100%;" highlight-current-row @row-click="getDetail">
							<el-table-column type="index" width="50" />
							<el-table-column width="5">
								<template #default='{ row}'>
									<div :class="idInList(row.id) ? 'readed' : 'noread'"></div>
								</template>
							</el-table-column>
							<el-table-column label="主题" prop="message_title">
								<template #default='{ row}'>
									<div class="title-wrapped">
										<div class="title">{{row.message_title}}</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="等级" prop="message_level">
								<template #default='{row}'>
									<el-tag class="mx-1" round
										v-if="row.message_level=='一般'">{{row.message_level}}</el-tag>
									<el-tag type="warning" class="mx-1" round
										v-if="row.message_level=='重要'">{{row.message_level}}</el-tag>
									<el-tag type="danger" class="mx-1" round
										v-if="row.message_level=='必要'">{{row.message_level}}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="发布日期" prop="message_publish_time">
								<template #default='{row}'>
									<div>{{row.message_publish_time?.slice(0,10)}}</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-aside>
			<el-main>
				<div class="detail-wrapped" v-if="messageInfo.message_title!==''">
					<div>{{ messageInfo.message_title }}</div>
					<div v-html="messageInfo.message_content"></div>
				</div>
				<div class="detail-wrapped" v-else>
					请点击列表中的消息进行查看
				</div>
			</el-main>
		</el-container>
	</el-dialog>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref,
	} from 'vue'
	import {
		getDepartmentMsg,
		getDepartmentMsgList,
		getReadListAndStatus,
		clickDelete
	} from '@/api/dep_msg.js'
	import { updateClick } from '@/api/message.js'
	import {
		useMsg
	} from '@/store/message.js'
	const msgStore = useMsg()
	const tableData = ref([])

	const messageInfo = reactive({
		message_title: '',
		message_content: ''
	})
	// 当前未读消息
	const readList = ref([])

	const getUserDepartmentMessage = async () => {
		const id = localStorage.getItem('id')
		const department = localStorage.getItem('department')
		if (department !== null) {
			const res = await getReadListAndStatus(id)
			tableData.value = await getDepartmentMsgList(department)
			if (res[0].read_status == 0) {
				const {
					read_list
				} = await getDepartmentMsg(id, department)
				readList.value = read_list
			} else {
				readList.value = JSON.parse(res[0].read_list)
			}
		}
	}
	getUserDepartmentMessage()


	const getDetail = async (row : any) => {
		await updateClick(row.message_click_number, row.id)
		await clickDelete(row.id, localStorage.getItem('id'))
		messageInfo.message_title = row.message_title
		messageInfo.message_content = row.message_content
		getUserDepartmentMessage()
	}

	const idInList = (id : number) => {
		if (readList.value.indexOf(id) !== -1) {
			return 0
		} else {
			return 1
		}
	}
	// 弹窗默认为false
	const dialog = ref(false)
	// 暴露open
	const open = () => {
		dialog.value = true
	}
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.el-aside {
		padding-left: 8px;
		min-height: 500px;
	}

	.el-main {
		min-height: 500px;
		--el-main-padding: 0px;
		border-left: 1px solid #eee;
	}

	.message-list-wrapped {
		height: 500px;
	}

	.list-table-content {
		min-height: 10px;
		padding: 8px;
	}

	.el-table {
		height: 100%;

		.title-wrapped {
			display: flex;
			align-items: center;
		}

		.title {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.readed {
		display: block;
		width: 5px;
		padding: 1px;
		height: 5px;
		border-radius: 50%;
		background: #A9A9A9;
	}

	.noread {
		display: block;
		width: 5px;
		padding: 1px;
		height: 5px;
		border-radius: 50%;
		background: #FFA500;
	}

	.detail-wrapped {
		padding: 8px;
	}
</style>